<div ng-init="query_event.init();" class="kmi-layout-content QT07-query-page">
    <div class="kmi-header-row">
        <button class="back-btn" ng-click="query_event.close();" ng-if="fromMainEvent">
            <img src='image/smes_v340/W_Com_DropLeft_nor_32.png'></img>
        </button>
        <div class="header-title" ng-bind="'QT_standard.common.filterCondition.title' | translate"></div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page">
            <div class="query-condition">
                <div class="left">
                    <div class="label-field">
                        <div class="kmi-text-fields conditoin-fields">
                            <label for="item-type" ng-bind="'QT07.query_page.type' | translate"></label>
                        </div>
                        <div class="kmi-text-fields conditoin-fields">
                            <label for="item-type" ng-bind="'QT07.query_page.condition' | translate"></label>
                        </div>
                    </div>
                    <div class="input-field">
                        <div class="kmi-text-fields conditoin-fields">
                            <div class="input-wrapper" id="item-type">
                                <input ng-click="query_event.loadItemTypeList(query_event.traceList)" ng-model="query_event.selectTRACE.TRACENAME" class="column_name  " type="text" readonly="readonly">
                                <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                            </div> 
                        </div>
                        <div class="kmi-text-fields condition-fields">
                            <div class="input-wrapper">
                                <input class="column_name" ng-click="query_event.loadCodeList(query_event.selectCond)" ng-model="query_event.selectCond.CONDNAME" type="text" readonly="readonly">
                                <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                            </div> 
                            <div class="input-wrapper query" ng-if="query_event.selectCond.CONDDATATYPE != 4">
                                <input class="query_mode" ng-click="query_event.loadTypeList(query_event.select_type_item)" ng-model="query_event.select_type_item.name" type="text" readonly="readonly">
                                <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                            </div>
                            <div class="input-wrapper date" ng-if="query_event.selectCond.CONDDATATYPE === 3">
                                <input class="column_value" type="text" mdl-datepicker="condition_item.value" placeholder="{{'C00.date'|translate}}"></input>
                            </div>
                            <div class="input-wrapper date-range" ng-if="query_event.selectCond.CONDDATATYPE === 4">
                                <input mdl-datepicker="query_event.startTime" placeholder="{{'C00.date'|translate}}"></input>
                                <div class="between">~</div>
                                <input mdl-datepicker="query_event.endTime" placeholder="{{'C00.date'|translate}}"></input>
                            </div>
                            <div class="input-wrapper" ng-if="query_event.selectCond.CONDDATATYPE != 4">
                                <input class="column_value" ng-model="query_event.select_txt_vale" type="text">
                            </div>
                            <button ng-click="query_event.addCondition()" class="mdl-button mdl-js-button mdl-button--icon mdl-button--icon_prime">
                                <img src="image/icons/add.png">
                            </button>
                        </div>
                    </div>
                </div>
                <div class="right setting-field">
                    <div class="kmi-text-fields">
                        <div class="kmi-button">
                            <label ng-bind="'QT07.query_page.load'|translate"></label>
                            <div class="kmi-can-click" ng-click="query_event.loadQuery()"></div>
                        </div>
                    </div>
                    <div class="kmi-text-fields">
                        <div class="kmi-button">
                            <label ng-bind="'QT07.query_page.save'|translate"></label>
                            <div class="kmi-can-click" ng-click="query_event.saveQuery()"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="kmi-list column-selector" column-selector-id="query-page">
                <div class="kmi-list__header">
                    <div class="kmi-list__column width-fixed" style="flex: 0 0 50px;"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'QT07.query_page.type' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'QT07.query_page.condition' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'QT07.query_page.condoperand' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'QT07.query_page.value' | translate"></div>
                </div>
                <div class="kmi-list__row-content"> 
                    <div class="kmi-list__row" ng-repeat="item in query_event.displayCondition track by $index">
                        <div class="kmi-list__column clear" ng-click="query_event.removeConditionItem(item.traceNo, item.value)">
                            <span class="material-icons">clear</span>
                        </div>
                        <div class="kmi-list__column column-border" ng-bind="item.traceName"></div>
                        <div class="kmi-list__column column-border" ng-bind="item.condName"></div>
                        <div class="kmi-list__column column-border" ng-bind="item.queryName"></div>
                        <div class="kmi-list__column column-border" ng-bind="item.value"></div>
                    </div>
                </div>
            </div>
            <div class="query-layout-footer">
                <div class="kmi-button confirm" ng-disabled="query_event.condition.length === 0">
                    <label class="ng-binding" ng-bind="'common.btn.confirm'|translate"></label>
                    <div class="kmi-can-click" ng-click="query_event.confirm()"></div>
                </div>
                <div class="kmi-button cancel">
                    <label ng-bind="'common.btn.close'|translate"></label>
                    <div class="kmi-can-click" ng-click="query_event.close()" ng-if="fromMainEvent"></div>
                </div>
            </div>
        </div>
    </div>
</div>